//----------------------数据回填---------------------------
let id = location.search.substring(4)






initEditor()
//选择分类
$.ajax({
    url: '/my/category/list',
    success: function (res) {
        let str = ''
        res.data.forEach(item => {
            str += `
            <option value="${item.id}">${item.name}</option>
            `
        })
        $('select').html(str)
        let form = layui.form
        form.render()

        //------------------------------数据回填  避免异步请求--------------
        $.ajax({
            url: '/my/article/' + id,
            success: function (res) {
                let form = layui.form
                form.val('edit', res.data)
                image.cropper('replace', baseUrl + '/' + res.data.cover_img)
             }
        })
     }
})



// ---------------  创建剪裁区 ------------------
// - 找到剪裁区的图片 （img#image）
var image = $('#image')
// - 设置配置项
var option = {
    // 纵横比(宽高比)
    aspectRatio: 400/280, // 正方形
    // 指定预览区域
    preview: '.img-preview', // 指定预览区的类名（选择器）
    autoCropArea: 1
};
// - 调用cropper方法，创建剪裁区
image.cropper(option)

$('#upload').on('click', function () {
    $('#file').trigger('click')
})
 
$('#file').on('change', function () {
    if (this.files.length>0) {
        let fileObject = this.files[0]
        let url = URL.createObjectURL(fileObject)
        console.log(url);
        image.cropper('replace',url)
    }
})


//------------------------------表单提交时获取数据----------------------------------
$('form').on('submit', function (e) {
    e.preventDefault()
    let fd = new FormData(this)
    
    //设置 content 的值
    fd.set('content',tinyMCE.activeEditor.getContent())
    //获取cover_img的值
    let canvas = image.cropper('getCroppedCanvas', { width: 400, height: 280 })
    canvas.toBlob(function (blob) {
        fd.append('cover_img', blob)
        fd.append('id',id)
        //ajax提交数据
        $.ajax({
            type: 'POST',
            url: '/my/article/update',
            data: fd,
            contentType: false,
            processData:false,
            success: function (res) {
                
                if (res.status===0) {
                    layer.msg(res.message)
                    location.href='./list.html'
                }
              }
        })
        // fd.forEach((value, key) => console.log(key,value))
      })
    
  })